<template>
  <div class="classify">
    <div>
      <el-button @click="dialogTableVisible1()" type="primary" style="height:35px;display:flex;align-items: center;">添加分类</el-button>
    </div>
    <div class="Separatelist">
      <div class="Separationname">
        <span style="flex:7;">分类名称</span>
        <span style="flex:3;">操作</span>
      </div>
      <div class="Separationname1" v-for="(item1,index1) in Classificationlist" :key="item1.id">
        <div style="" class="Separationname2">
          <div style="flex:7;">
            <span @click="Expand(index1)" v-if="!show" class="iconfont icon-jiahaozhankai icon" style="margin-right:5px;"></span>
            <span @click="Expand(index1)" v-else class="iconfont icon-11111 icon" style="margin-right:5px;"></span>
            <span>{{item1.name}}</span>
          </div>
          <div class="span1">
            <span @click="getedit(index1,item1.name,item1.id)">编辑</span>
          </div>
        </div>
        <div class="Separationname3" v-show="show&&show1==index1" v-for="(item2,index2) in item1.children" :key="item2.id">
          <div style="flex:7;">
            <!-- <span @click="Expand2(index2)" class="iconfont icon-jiahaozhankai icon" style="margin-right:5px;"></span> -->
            <span>{{item2.name}}</span>
          </div>
          <div class="span1">
            <span @click="getedit(index2,item2.name,item2.id)">编辑</span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog @close="close" width="35%" title="添加分类" :visible.sync="dialogTableVisible">
        <el-skeleton :loading="loading" animated>
          <template slot="template">
            <el-skeleton-item style="height:20px;margin-bottom: 10px;width: 30%;">
            </el-skeleton-item>
            <el-skeleton-item style="height:20px;margin-bottom: 30px;">
            </el-skeleton-item>
            <el-skeleton-item style="height:20px;margin-bottom: 10px;width: 30%;">
            </el-skeleton-item>
            <el-skeleton-item style="height:20px;margin-bottom: 20px;">
            </el-skeleton-item>
            <el-skeleton-item style="height:20px;margin-bottom: 10px;width: 30%;">
            </el-skeleton-item>
          </template>
        </el-skeleton>
        <div style="border-top:1px solid #f5f5f5" v-if="!loading">
          <p>父级分类</p>
          <el-cascader placeholder="请选择分类，不选则创建顶级分类" style="width:100%;" v-model="value" :options="options" @change="handleChange(value)"></el-cascader>
          <div style="margin-top:20px;">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item :required="true" style="margin-left:-30px;" label="分类名称">
              </el-form-item>
              <div style="margin-top:-40px;margin-left: -100px;">
                <el-form-item prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Bus from '@/components/eventBus.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      loading: true,
      dialogTableVisible: false,
      //分级列表数据
      options: [],
      value: '',
      value1: '',
      show: false,
      show1: '',
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      //从vuex中获取到分类列表数据
      Classificationlist: state => state.class1.Classificationlist
    })
  },
  mounted() {
    //一开始加载路由就传送相应的值给leftmenu页面
    Bus.$emit('show', 1)
    Bus.$emit('name', this.$route.meta.name)
    this.getClassificationlist()
  },
  methods: {
    //Dialog 关闭的回调
    close() {
      this.loading = true
      this.ruleForm.name = ''
      this.value = ''
    },
    //点击编辑
    getedit(e, name, id) {
      this.dialogTableVisible = true
      this.ruleForm.name = name
      // this.value = name
      this.dialogTableVisible1()
    },
    //展开分类
    Expand(e) {
      console.log(e)
      this.show1 = e
      this.show = !this.show
    },
    expandchange(e) {
      console.log(e)
    },
    //添加分类按钮
    dialogTableVisible1() {
      this.dialogTableVisible = true

      for (let i = 0; i < this.Classificationlist.length; i++) {
        var arr = {}
        var arr1 = []
        // var arr1 = {}
        // arr1.children = this.Classificationlist[i].children
        arr.label = this.Classificationlist[i].name
        arr.id = this.Classificationlist[i].id
        arr.value = this.Classificationlist[i].id
        // for (let j = 0; j < arr1.children.length; j++) {
        //   var arr2 = {}
        //   arr2.label = arr1.children[j].name
        //   this.children.push(arr2)
        // }
        // console.log(this.children)
        // arr += this.options[i].label
        this.options.push(arr)
        // this.options.push(arr1)
      }
      for (let i = 0; i < this.Classificationlist.length; i++) {
        if (this.Classificationlist[i].children.length !== 0) {
          this.options[i].children = this.Classificationlist[i].children
          for (let j = 0; j < this.options[i].children.length; j++) {
            this.options[i].children[j].label = this.Classificationlist[i].children[j].name
            this.options[i].children[j].value = this.Classificationlist[i].children[j].id
          }
        }
        // this.options1.push(this.options[i].children)
      }
      // console.log(this.options)
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    getClassificationlist() {
      this.$store.dispatch('getClassificationlist')
    },
    handleChange(value) {
      // console.log(value[0])
      if (value.length == 2) {
        this.value1 = value[1]
      } else {
        this.value1 = value[0]
      }
    },
    //表单提示规则
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    //提交
    submitForm() {
      this.$store.dispatch('getAddclassification', { name: this.ruleForm.name, pid: this.value1 })
      setTimeout(() => {
        this.dialogTableVisible = false
      }, 500)
    },
    //重置
    resetForm() {
      this.ruleForm.name = ''
      this.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.classify {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  // height: 590px;
  // overflow: auto;
  .Separatelist {
    margin-top: 20px;
    .Separationname {
      display: flex;
      font-size: 15px;
      // align-items: center;
      // justify-content: center;
      padding: 18px;
      background-color: rgb(234, 231, 231);
    }
    .Separationname1 {
      // display: flex;
      font-size: 14px;
      // align-items: center;
      // justify-content: center;
      .Separationname2 {
        display: flex;
        padding: 18px;
        border-top: 1px solid rgb(216, 213, 213);
        background-color: #fff;
        .span1 {
          flex: 3;
          span {
            color: blue;
            opacity: 0.7;
          }
          span:hover {
            cursor: pointer;
            opacity: 1;
          }
        }
        .icon:hover {
          color: blue;
          cursor: pointer;
        }
      }
      .Separationname2:hover {
        background-color: #f5f5f5;
        cursor: pointer;
      }
      .Separationname3 {
        display: flex;
        padding: 18px;
        border-top: 1px solid rgb(216, 213, 213);
        background-color: #fff;
        padding-left: 48px;
        .span1 {
          flex: 3;
          margin-left: -30px;
          span {
            color: blue;
            opacity: 0.7;
          }
          span:hover {
            cursor: pointer;
            opacity: 1;
          }
        }
      }
      .Separationname3:hover {
        background-color: #f5f5f5;
        cursor: pointer;
      }
    }
  }
}
</style>